<template>
  <div class="app-container home">
    <!-- 顶部Banner区域 -->
    <div class="banner-section">
      <div class="banner-content">
        <h1 class="banner-title">电子病历解析系统</h1>
        <p class="banner-desc">引领医疗数字化转型，提升诊疗效率与质量</p>
        <div class="banner-tags">
          <el-tag type="success" effect="dark">AI辅助诊断</el-tag>
          <el-tag type="primary" effect="dark">智能影像识别</el-tag>
          <el-tag type="warning" effect="dark">远程会诊</el-tag>
          <el-tag type="danger" effect="dark">医疗资源调度</el-tag>
        </div>
      </div>
      <div class="banner-image">
        <img src="" alt="医疗科技" class="banner-svg">
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <div class="stats-card">
        <div class="stats-icon today-icon">
          <i class="el-icon-s-claim"></i>
        </div>
        <div class="stats-info">
          <div class="stats-title">今日就诊</div>
          <div class="stats-value">138</div>
          <div class="stats-trend up">
            <i class="el-icon-top"></i>
            <span>12.5% 较昨日</span>
          </div>
        </div>
        <el-button type="text" class="stats-detail">查看详情</el-button>
      </div>

      <div class="stats-card">
        <div class="stats-icon ai-icon">
          <i class="el-icon-s-help"></i>
        </div>
        <div class="stats-info">
          <div class="stats-title">AI辅助诊断</div>
          <div class="stats-value">56</div>
          <div class="stats-trend up">
            <i class="el-icon-top"></i>
            <span>8.3% 较昨日</span>
          </div>
        </div>
        <el-button type="text" class="stats-detail">查看详情</el-button>
      </div>

      <div class="stats-card">
        <div class="stats-icon device-icon">
          <i class="el-icon-s-operation"></i>
        </div>
        <div class="stats-info">
          <div class="stats-title">设备运行</div>
          <div class="stats-value">92<span class="percent">%</span></div>
          <div class="stats-trend normal">
            <i class="el-icon-check"></i>
            <span>正常运行</span>
          </div>
        </div>
        <el-button type="text" class="stats-detail">查看详情</el-button>
      </div>

      <div class="stats-card">
        <div class="stats-icon doctor-icon">
          <i class="el-icon-user"></i>
        </div>
        <div class="stats-info">
          <div class="stats-title">在线医生</div>
          <div class="stats-value">24</div>
          <div class="stats-trend online">
            <i class="el-icon-video-camera"></i>
            <span>可进行远程会诊</span>
          </div>
        </div>
        <el-button type="text" class="stats-detail">查看详情</el-button>
      </div>
    </div>

    <!-- 系统介绍与功能 -->
    <div class="system-section">
      <div class="section-header">
        <h2 class="section-title">系统介绍</h2>
        <div class="section-divider"></div>
      </div>

      <div class="system-content">
        <div class="system-info">
          <p>
            面向未来的智能医疗解决方案，集成AI辅助诊断、电子病历管理、医疗资源调度于一体的全方位医疗信息平台。我们致力于通过数字化技术赋能医疗行业，提高医疗质量，优化医疗资源配置，为患者提供更加便捷、精准的医疗服务。
          </p>
          <p>
            本系统采用前沿技术架构，结合人工智能算法，实现医疗数据的智能分析和预测，为医生提供辅助诊断建议，提高诊断准确率；同时，通过电子病历系统实现医疗信息的无缝流转，提升医疗协作效率。
          </p>
          <div class="version-tag">
            <span>当前版本:</span> v{{ version }}
          </div>
        </div>

        <div class="features-container">
          <div class="feature-column">
            <h3 class="feature-title">
              <i class="el-icon-cpu feature-icon"></i>
              智能诊断与决策支持
            </h3>
            <ul class="feature-list">
              <li>AI辅助诊断分析</li>
              <li>医学影像智能识别</li>
              <li>临床决策支持系统</li>
              <li>医疗数据深度挖掘</li>
              <li>患者风险评估预警</li>
              <li>智能治疗方案推荐</li>
            </ul>
          </div>

          <div class="feature-column">
            <h3 class="feature-title">
              <i class="el-icon-set-up feature-icon"></i>
              医疗资源管理
            </h3>
            <ul class="feature-list">
              <li>电子病历管理</li>
              <li>医疗设备资源调度</li>
              <li>医护人员排班系统</li>
              <li>药品库存智能管理</li>
              <li>医保结算自动化</li>
              <li>远程会诊平台</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统特点 -->
    <div class="highlights-section">
      <div class="section-header">
        <h2 class="section-title">系统特点</h2>
        <div class="section-divider"></div>
      </div>

      <div class="highlights-container">
        <div class="highlight-card">
          <div class="highlight-icon">
            <i class="el-icon-s-opportunity"></i>
          </div>
          <div class="highlight-content">
            <h3>人工智能辅助诊断</h3>
            <p>利用深度学习算法分析医学影像和临床数据，提供辅助诊断建议</p>
          </div>
        </div>

        <div class="highlight-card">
          <div class="highlight-icon">
            <i class="el-icon-s-management"></i>
          </div>
          <div class="highlight-content">
            <h3>智能资源调度</h3>
            <p>根据就诊需求和紧急程度，自动优化医疗资源分配</p>
          </div>
        </div>

        <div class="highlight-card">
          <div class="highlight-icon">
            <i class="el-icon-lock"></i>
          </div>
          <div class="highlight-content">
            <h3>数据安全保障</h3>
            <p>采用多层加密技术，确保患者隐私和医疗数据安全</p>
          </div>
        </div>

        <div class="highlight-card">
          <div class="highlight-icon">
            <i class="el-icon-s-grid"></i>
          </div>
          <div class="highlight-content">
            <h3>全流程管理</h3>
            <p>从患者挂号到诊疗、检查、治疗、康复的全流程数字化管理</p>
          </div>
        </div>

        <div class="highlight-card">
          <div class="highlight-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div class="highlight-content">
            <h3>远程医疗支持</h3>
            <p>提供远程会诊、远程监护等功能，突破地域限制</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术支持 -->
    <div class="support-section">
      <div class="section-header">
        <h2 class="section-title">技术支持</h2>
        <div class="section-divider"></div>
      </div>

      <div class="support-container">
        <div class="support-card">
          <div class="support-icon">
            <i class="el-icon-service"></i>
          </div>
          <div class="support-content">
            <h3>7×24小时技术支持</h3>
            <p>专业团队全天候提供技术支持和系统维护</p>
          </div>
        </div>

        <div class="support-card">
          <div class="support-icon">
            <i class="el-icon-cloudy"></i>
          </div>
          <div class="support-content">
            <h3>云端部署与灾备</h3>
            <p>提供云端部署方案，确保系统高可用性和数据安全</p>
          </div>
        </div>

        <div class="support-card">
          <div class="support-icon">
            <i class="el-icon-refresh"></i>
          </div>
          <div class="support-content">
            <h3>定期更新与迭代</h3>
            <p>系统定期更新，持续优化功能和用户体验</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="contact-section">
      <div class="section-header">
        <h2 class="section-title">联系我们</h2>
        <div class="section-divider"></div>
      </div>

      <div class="contact-container">
        <div class="contact-info">
          <div class="contact-item">
            <i class="el-icon-location"></i>
            <span>地址：北京市海淀区中关村科技园区</span>
          </div>
          <div class="contact-item">
            <i class="el-icon-phone"></i>
            <span>电话：400-888-XXXX</span>
          </div>
          <div class="contact-item">
            <i class="el-icon-message"></i>
            <span>邮箱：support@smartmedi.com</span>
          </div>
        </div>

        <div class="qr-container">
          <div class="qr-item">
            <div class="qr-image">
              <img src="" alt="扫码咨询">
            </div>
            <div class="qr-label">扫码咨询</div>
          </div>

          <div class="qr-item">
            <div class="qr-image">
              <img src="" alt="关注公众号">
            </div>
            <div class="qr-label">关注公众号</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getConfigKey } from "@/api/system/config";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.9.0"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  color: #606266;

  // Banner区域
  .banner-section {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f0f5ff 0%, #e8f4ff 100%);
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .banner-content {
      flex: 1;

      .banner-title {
        font-size: 32px;
        font-weight: 600;
        color: #303133;
        margin: 0 0 16px 0;
        background: linear-gradient(90deg, #409EFF, #79bbff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .banner-desc {
        font-size: 16px;
        line-height: 1.6;
        color: #606266;
        margin-bottom: 24px;
        max-width: 600px;
      }

      .banner-tags {
        .el-tag {
          margin-right: 12px;
          margin-bottom: 8px;
          padding: 0 12px;
          height: 32px;
          line-height: 30px;
          font-size: 13px;
          border: none;
        }
      }
    }

    .banner-image {
      width: 240px;
      height: 160px;
      margin-left: 40px;

      .banner-svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  // 核心指标卡片
  .stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;

    .stats-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      position: relative;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
      }

      .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 28px;
          color: #fff;
        }

        &.today-icon {
          background: linear-gradient(135deg, #409EFF, #53a8ff);
        }

        &.ai-icon {
          background: linear-gradient(135deg, #F56C6C, #f78989);
        }

        &.device-icon {
          background: linear-gradient(135deg, #67C23A, #85ce61);
        }

        &.doctor-icon {
          background: linear-gradient(135deg, #E6A23C, #ebb563);
        }
      }

      .stats-info {
        flex: 1;

        .stats-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .stats-value {
          font-size: 28px;
          font-weight: 600;
          color: #303133;
          line-height: 1;
          margin-bottom: 8px;

          .percent {
            font-size: 16px;
            margin-left: 2px;
          }
        }

        .stats-trend {
          font-size: 12px;
          display: flex;
          align-items: center;

          i {
            margin-right: 4px;
            font-size: 12px;
          }

          &.up {
            color: #67C23A;
          }

          &.down {
            color: #F56C6C;
          }

          &.normal {
            color: #67C23A;
          }

          &.online {
            color: #409EFF;
          }
        }
      }

      .stats-detail {
        position: absolute;
        right: 15px;
        top: 15px;
        padding: 0;
        font-size: 12px;
        color: #909399;

        &:hover {
          color: #409EFF;
        }
      }
    }
  }

  // 章节标题样式
  .section-header {
    text-align: center;
    margin-bottom: 30px;

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
      position: relative;
      display: inline-block;
    }

    .section-divider {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409EFF, #79bbff);
      margin: 12px auto 0;
      border-radius: 3px;
    }
  }

  // 系统介绍部分
  .system-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .system-content {
      display: flex;
      align-items: flex-start;

      .system-info {
        flex: 1;
        padding-right: 40px;

        p {
          font-size: 14px;
          line-height: 1.8;
          color: #606266;
          margin-bottom: 16px;
        }

        .version-tag {
          display: inline-block;
          padding: 6px 12px;
          background: #f0f5ff;
          border-radius: 4px;
          font-size: 13px;
          color: #409EFF;

          span {
            color: #606266;
            margin-right: 4px;
          }
        }
      }

      .features-container {
        display: flex;
        gap: 40px;

        .feature-column {
          flex: 1;
          min-width: 220px;

          .feature-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin: 0 0 16px 0;
            display: flex;
            align-items: center;

            .feature-icon {
              margin-right: 8px;
              color: #409EFF;
              font-size: 18px;
            }
          }

          .feature-list {
            padding: 0;
            margin: 0;
            list-style-type: none;

            li {
              position: relative;
              padding-left: 16px;
              margin-bottom: 10px;
              font-size: 14px;
              color: #606266;

              &:before {
                content: "";
                position: absolute;
                left: 0;
                top: 8px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #409EFF;
              }
            }
          }
        }
      }
    }
  }

  // 系统特点部分
  .highlights-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .highlights-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .highlight-card {
        display: flex;
        align-items: flex-start;
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-5px);
        }

        .highlight-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, #409EFF, #79bbff);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          flex-shrink: 0;

          i {
            font-size: 24px;
            color: #fff;
          }
        }

        .highlight-content {
          h3 {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin: 0 0 8px 0;
          }

          p {
            font-size: 14px;
            line-height: 1.6;
            color: #606266;
            margin: 0;
          }
        }
      }
    }
  }

  // 技术支持部分
  .support-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .support-container {
      display: flex;
      justify-content: space-between;
      gap: 24px;

      .support-card {
        flex: 1;
        padding: 24px;
        border-radius: 8px;
        background: #f9fafc;
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
        }

        .support-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: linear-gradient(135deg, #409EFF, #79bbff);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;

          i {
            font-size: 28px;
            color: #fff;
          }
        }

        .support-content {
          text-align: center;

          h3 {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin: 0 0 12px 0;
          }

          p {
            font-size: 14px;
            line-height: 1.6;
            color: #606266;
            margin: 0;
          }
        }
      }
    }
  }

  // 联系方式部分
  .contact-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .contact-container {
      display: flex;
      align-items: center;

      .contact-info {
        flex: 1;

        .contact-item {
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          i {
            font-size: 18px;
            color: #409EFF;
            margin-right: 12px;
          }

          span {
            font-size: 14px;
            color: #606266;
          }
        }
      }

      .qr-container {
        display: flex;
        gap: 40px;

        .qr-item {
          text-align: center;

          .qr-image {
            width: 120px;
            height: 120px;
            margin-bottom: 12px;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .qr-label {
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
  }

  // 响应式调整
  @media (max-width: 1200px) {
    .system-content {
      flex-direction: column;

      .system-info {
        padding-right: 0;
        margin-bottom: 30px;
      }
    }

    .highlights-container {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media (max-width: 992px) {
    .stats-section {
      grid-template-columns: repeat(2, 1fr);
    }

    .banner-section {
      flex-direction: column;

      .banner-content {
        margin-bottom: 30px;
      }

      .banner-image {
        margin-left: 0;
      }
    }

    .contact-container {
      flex-direction: column;

      .contact-info {
        margin-bottom: 30px;
      }
    }
  }

  @media (max-width: 768px) {
    .highlights-container {
      grid-template-columns: 1fr !important;
    }

    .support-container {
      flex-direction: column;
    }

    .qr-container {
      flex-direction: column;
      align-items: center;

      .qr-item {
        margin-bottom: 20px;
      }
    }
  }
}
</style>

